// 导入变量和混合器
@import '@styles/variables.scss';
@import '@styles/mixins.scss';

// Header 容器
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: white;
    border-bottom: 1px solid $border-color;
    z-index: 100;
    transition: margin-left 0.3s ease;

    // 当侧边栏展开时的样式
    .sidebar-expanded & {
        margin-left: $sidebar-width;
    }

    // 当侧边栏收起时的样式
    .sidebar-collapsed & {
        margin-left: $sidebar-collapsed-width;
    }
}

// Header 内容
.header-content {
    max-width: 1440px;
    height: 100%;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

// 标题部分
.title-section {
    flex: 1;
    min-width: 0;
    margin-right: 24px;

    .title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 18px;
        font-weight: 600;
        color: $text-primary;
        cursor: pointer;
        padding: 4px 8px;
        border-radius: 4px;
        transition: background-color 0.2s ease;

        &:hover {
            background-color: $background-secondary;

            .edit-icon {
                opacity: 1;
            }
        }

        .edit-icon {
            font-size: 16px;
            color: $text-secondary;
            opacity: 0;
            transition: opacity 0.2s ease;
        }
    }

    .title-input {
        width: 100%;
        padding: 4px 8px;
        font-size: 18px;
        font-weight: 600;
        color: $text-primary;
        border: 1px solid $primary-color;
        border-radius: 4px;
        outline: none;
        background: white;

        &:focus {
            box-shadow: 0 0 0 2px rgba($primary-color, 0.1);
        }
    }
}

// 用户操作部分
.user-actions {
    display: flex;
    align-items: center;
    gap: 16px;

    .action-button {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        background: transparent;
        color: $text-secondary;
        cursor: pointer;
        border-radius: 4px;
        transition: all 0.2s ease;

        &:hover {
            background: $background-secondary;
            color: $text-primary;
        }

        i {
            font-size: 16px;
        }
    }

    .user-info {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 4px 8px;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.2s ease;

        &:hover {
            background-color: $background-secondary;
        }

        .avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
        }

        .name {
            font-size: 14px;
            color: $text-primary;
            max-width: 120px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}

// 响应式样式
@include responsive('md') {
    .header-content {
        padding: 0 16px;
    }

    .title-section {
        margin-right: 16px;

        .title {
            font-size: 16px;
        }

        .title-input {
            font-size: 16px;
        }
    }

    .user-actions {
        gap: 12px;

        .user-info {
            .name {
                display: none;
            }
        }
    }
}